<template>
  <div>
    <!-- 手机号 -->
    <p class="pp" ref="ptext" style="width:92%">
      <input type="text" v-model="input" placeholder="手机号码" @blur="add" ref="text" />
      <span v-show="show">必填</span>
      <van-icon name="phone-o" />
    </p>
    <p v-show="!result" style="color:red;font-size:0.2rem;margin:0">手机号输入格式有误</p>
    <!-- 密码 -->
    <p class="pp" ref="ppass" style="width:92%">
      <input type="password" v-model="inputPass" placeholder="密码" @blur="pass" ref="pass" />
      <span v-show="showpass">必填</span>
      <van-icon name="closed-eye" @click="closedeye" v-show="!passeye" />
      <van-icon name="eye" @click="eye" v-show="passeye" />
    </p>
    <p v-show="!resultPass" style="color:red;font-size:0.2rem;margin:0">密码保持6~16位</p>

    <!-- 登录账号 -->
    <div class="join-dl" @click="login">
      <router-link to style="color:white">登录</router-link>
    </div>
  </div>
</template>

<script>
import checkUserInfo from "../../utils/phone";
import { Notify } from "vant";
import { Toast } from "vant";
export default {
  components: {
    [Notify.Component.name]: Notify.Component
  },
  data() {
    return {
      input: "", //绑定手机号输入框内容
      inputPass: "", //判断隐藏手机号输入错误
      show: false, //手机号必填是否隐藏
      showpass: false, //  密码框必填是否隐藏
      passeye: false, //   眼睛是否隐藏
      result: true, //绑定密码输入框内容
      resultPass: true, //判断隐藏密码输入错误
      it: [] //存储用户信息
    };
  },
  methods: {
    // 验证手机号
    add() {
      let text = this.$refs.text.value;
      if (text == "") {
        this.show = true;
        this.$refs.ptext.style.background = "rgb(255, 233, 228)";
        this.$refs.text.style.background = "rgb(255, 233, 228)";
      } else {
        this.show = false;
        this.$refs.ptext.style.background = "#F5F5F5";
        this.$refs.text.style.background = "#F5F5F5";
      }

      this.result = checkUserInfo.checkMobile(this.input);
      if (!this.result) {
        this.input = ""; //清空手机号的输入框
        this.$refs.ptext.style.background = "rgb(255, 233, 228)";
        this.$refs.text.style.background = "rgb(255, 233, 228)";
      } else {
        this.$refs.ptext.style.background = "rgb(225, 255, 223)";
        this.$refs.text.style.background = "rgb(225, 255, 223)";
      }
    },
    pass() {
      let pass = this.$refs.pass.value;
      if (pass == "") {
        this.showpass = true;
        this.$refs.ppass.style.background = "rgb(255, 233, 228)";
        this.$refs.pass.style.background = "rgb(255, 233, 228)";
      } else {
        this.showpass = false;
        this.$refs.ppass.style.background = "#F5F5F5";
        this.$refs.pass.style.background = "#F5F5F5";
      }

      this.resultPass = checkUserInfo.checkPass(this.inputPass);
      if (!this.resultPass) {
        this.inputPass = ""; //清空密码的输入框
        this.$refs.ppass.style.background = "rgb(255, 233, 228)";
        this.$refs.pass.style.background = "rgb(255, 233, 228)";
      } else {
        this.$refs.ppass.style.background = "rgb(225, 255, 223)";
        this.$refs.pass.style.background = "rgb(225, 255, 223)";
      }
    },
    closedeye() {
      this.$refs.pass.type = "text";
      this.passeye = true;
    },
    eye() {
      this.$refs.pass.type = "password";
      this.passeye = false;
    },
    //登录
    login() {
      //判断
      let text = this.$refs.text.value;
      let pass = this.$refs.pass.value;
      if (text != "13500000000") {
        Notify("用户不存在请重新输入");
        this.$refs.text.value = "";
        return;
      }
      if (pass == "") {
        Notify("请输入密码");
        return;
      }
      this.$network
        .login({
          mobile: "13500000000",
          pwd: 123456
        })
        .then(res => {
          this.it = {
            zhanghu: "13500000000",
            uid: res.data.data.uid,
            token: res.data.data.token
          };
          this.save();
        });



      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "登录成功 3 秒后跳转"
      });

      let second = 3;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = `登录成功 ${second} 秒后跳转`;
        } else {
          this.$router.push("/user");
          clearInterval(timer);
          // 手动清除 Toast
          Toast.clear();
        }
      }, 1000);
      
    },
    //同步
    save() {
      localStorage.it = JSON.stringify(this.it);
    }
  },
  created() {
    let it = localStorage.it;
    if (it) {
      this.it = JSON.parse(it);
    }
  }
};
</script>

<style>
</style>